<template>
  <div class="legend-content">
    <div class="legend-content-item" v-for="(item, index) of legendList" :style="{...magnifyFontSizeObj}">
      <div :style="{backgroundColor: item.color}"></div>
      <div style="white-space: nowrap; overflow: visible">{{ item.label }}</div>
    </div>
  </div>
  <div ref="echartDom" v-bind="$attrs"></div>
</template>

<script setup>
import {ref, defineProps, onMounted, onUnmounted, inject, shallowRef, defineExpose,defineEmits } from 'vue'
import {pxToRem} from "@/utils/index";

const props = defineProps({
  boxplotData: {
    type: Array,
    default: () => []
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  }
});
const emit = defineEmits(['getCode'])
const echartDom = ref(null);
const myChart = shallowRef(null);
const echarts = inject('echarts');
const legendList = ref([
  {
    color: '#FFC352',
    label: '偏低'
  },
  {
    color: '#5ABE52',
    label: '稳定'
  },
  {
    color: '#1FB7FF',
    label: '分布不平均'
  }
])

const magnifyFontSizeObj = ref({
  '--custom-font-size-10': pxToRem(props?.dialogData?.fontSizeTimes * 10) + 'px',
  '--custom-font-size-12': pxToRem(props?.dialogData?.fontSizeTimes * 12) + 'px',
})

const initEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    let option = {
      grid: {
        top: pxToRem(40),
        bottom: 0,
        left: 0,
        right: 0,
        containLabel: true,
      },
      dataZoom: { // 数据过多内部拖动逻辑
        type: "inside",
        // zoomLock: true, // 不可缩放
        startValue: 0,
        // endValue: 5,
      },
      tooltip: {
        trigger: 'item'
      },
      xAxis:[
        {
          type:'category',
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          splitLine: {
            show: false // 不显示网格线
          },
          axisLabel: {
            color: 'white',
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            interval: 0,
          },
          data: props?.boxplotData?.xAxisData
        }
      ],
      yAxis:{
        min: 0,
        max: 'dataMax',
        min: 'dataMin', // 设置 y 轴最小值为数据最小值
        name: props?.boxplotData?.yAxisName,
        splitNumber: 2,
        nameTextStyle:{
          color:'#fff',
          fontSize: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 12 : 30)
        },
        nameGap: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 15 : 25),
        axisTick: {
          show: false // 不显示坐标轴刻度线
        },
        axisLine: {
          show: false, // 不显示坐标轴线
        },
        splitLine: {
          show: false // 不显示网格线
        },
        axisLabel: {
          color: 'white',
          fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
          interval: 0
        }
      },
      series: [
        {
          type: 'bar',
          min: 0,
          max: (value) => value.max || 100,
          barWidth: pxToRem(18 * props?.dialogData?.fontSizeTimes),
          tooltip: {
            show: false
          },
          data: props?.boxplotData?.yAxisMaxNumArray,
          itemStyle: {
            color: (params) => {
              return props?.boxplotData?.xAxisBgColor[params.dataIndex]
            }
          },
          z: 1
        },
        {
          type: 'boxplot',
          boxWidth: [pxToRem(10), pxToRem(10)],
          data: props?.boxplotData?.boxData,
          itemStyle: {
            borderColor: '#535353'
            // borderColor: 'transparent',
            // borderWidth: 0
          },
          tooltip: {
            formatter: (params) => {
              return (
                  `${params.name}` + '<br/>' +
                  '最大值: ' + params.data[1] + '<br/>' +
                  '上四分位数: ' + params.data[2] + '<br/>' +
                  '中位数: ' + params.data[3] + '<br/>' +
                  '下四分位数: ' + params.data[4] + '<br/>' +
                  '最小值: ' + params.data[5]
              );
            },
            textStyle: {
              color: "#fff",
              fontSize: pxToRem(14),
            },
            backgroundColor: "rgba(47, 99, 205, 0.5)",
            borderColor: '#66FFFF', // 设置边框颜色
            borderWidth: 1, // 设置边框宽度
          },
      
          z: 2
        },
        {
          type: 'scatter',
          symbolSize: 6,
          itemStyle: {
            color: 'white'
          },
          data: props?.boxplotData?.scatterData,
          tooltip: {
            formatter: (params) => {
              return (
                  `${params.name}: ` + params.data[1]
              );
            }
          },
          z: 3
        }
      ]
    }
    option && myChart.value.setOption(option, true);
    myChart.value.on("click", (params) => {
			props.boxplotData.xAxisData.map((item,index) => {
        // console.log(item,params.name)
				if(item == params.name){
						emit('getCode',{
              cityName:props.boxplotData.xAxisData[index],
              cityCode:props.boxplotData.code[index],
              level:props.boxplotData.level
            })
				}	
			})
		});
  }
}

const changeFontSize = () => { // 动态改变字体大小方法
  magnifyFontSizeObj.value = {
    '--custom-font-size-10': pxToRem(props?.dialogData?.fontSizeTimes * 10) + 'px',
    '--custom-font-size-12': pxToRem(props?.dialogData?.fontSizeTimes * 12) + 'px',
  }
}

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  changeFontSize();
  initEchart();
};

defineExpose({
  updateChart
})

onMounted(() => {
  initEchart();
  window.addEventListener("resize", updateChart);
})

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
})
</script>

<style scoped lang="less">
.h118 {
  height: 168px;
}
.dialog-h118 {
  width: 1120px;
  height: 500px;
}

.legend-content {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  align-items: center;
  .legend-content-item {
    display: flex;
    align-items: center;
    color: white;

    > div:first-child {
      width: var(--custom-font-size-10);
      height: var(--custom-font-size-10);
      margin-right: 6px;
    }

    > div:last-child {
      font-size: var(--custom-font-size-12);
    }
  }

  .legend-content-item:not(:last-child) {
    margin-right: 30px;
  }
}
</style>